@extends('admin.home.main')

@section('body')
<section id="main-content">
	<section class="wrapper">
	<h3>活动添加</h3>
		<!-- BASIC FORM ELELEMNTS -->
		<div class="row mt">
		  <div class="col-lg-12">
			<div class="form-panel">
				<p style="color:red; font-size:16px;">备注：课程题图1 图片尺寸：165.5x165.5像素(px) 图片格式：*.png,*.jpg</p>
				<p style="color:red; font-size:16px;">备注：课程题图2 图片尺寸：343x150像素(px) 图片格式：*.png,*.jpg</p>
			  <form class="form-horizontal style-form" action="/admin/activity/insert" method="post" id="art_form" enctype="multipart/form-data">
			  	<input type="hidden" id="_token" name="_token" value="{{csrf_token()}}">
			  	<input type="file" class="material_file" name="material_file" style="display:none;">
			  	<input type="hidden" readonly="readonly" name="course" id="course" value="activity">
				<div class="form-group">
					<label class="col-sm-2 col-sm-2 control-label">活动名称</label>
					<div class="col-sm-10">
						<input type="text" style="width:400px;" class="form-control" id="name" name="name" placeholder="请输入活动名称" size="50">
					</div>
				</div>

				<div class="form-group">
					<label class="col-sm-2 col-sm-2 control-label">活动简介</label>
					<div class="col-sm-10">
						<textarea class="form-control" id="desc" name="desc" rows="5" cols="5" placeholder="请输入活动简介" style="width:400px;"></textarea>
					</div>
				</div>

				  <div class="form-group">
					  <label class="col-sm-2 col-sm-2 control-label">活动名额</label>
					  <div class="col-sm-10">
						  <input type="text" style="width:400px;" class="form-control" id="quota" name="quota"
								 placeholder="请输入活动名额" size="50">
					  </div>
				  </div>

				<div class="form-group">
					<label class="col-sm-2 col-sm-2 control-label">活动题图1</label>
					<div class="col-sm-10">
						<a class="btn btn-theme02 add_img" href="javascript:;" file_id = "1">选择图片</a>
						<div class="fileupload-new thumbnail" style="width: 200px; margin-top:10px;">
							<img id="thumb" src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt="">
						</div>
	                    <input type="hidden" readonly="readonly" id="title_pic1" name="title_pic1" value="">
					</div>
				</div>

				  <div class="form-group">
					  <label class="col-sm-2 col-sm-2 control-label">活动题图2</label>
					  <div class="col-sm-10">
						  <a class="btn btn-theme02 add_img" href="javascript:;" file_id = "2">选择图片</a>
						  <div class="fileupload-new thumbnail" style="width: 200px; margin-top:10px;">
							  <img id="thumb2" src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt="">
						  </div>
						  <input type="hidden" readonly="readonly" id="title_pic2" name="title_pic2" value="">
					  </div>
				  </div>

				<div class="form-group">
					<label class="col-sm-2 col-sm-2 control-label">活动详情</label>
					<div class="col-sm-10">
						<a class="btn btn-theme02 add_img" href="javascript:;" file_id = "3">选择图片</a>
						<!-- <a class="btn btn-theme02 add_img" file_id = "2" href="javascript:;" onclick="uploadPhoto()">选择>图片</a> -->

						<div class="fileupload-new thumbnail" style="width: 200px; margin-top:10px;">
							<img id="content" src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt="">
						</div>
						<input type="hidden" id="c_imgsrc" name="c_imgsrc" value="">
					</div>
				</div>

				<div class="form-group">
					<label class="col-sm-2 col-sm-2 control-label">报名时间</label>
					
						<div class="col-md-10">
							<input type="text" class="form-control" style="width:120px; float:left;"
								   onclick="WdatePicker
							({dateFmt:'yyyy-MM-dd HH:mm:ss'})" id="start_date" name='start_time' placeholder="报名开始时间"
								   value=""/>
							<input type="text" class="form-control" style="width:120px; float:left; margin-left:10px;"
								   onclick="WdatePicker
							({dateFmt:'yyyy-MM-dd HH:mm:ss'})" id="end_date" name='end_time' placeholder="报名结束时间"
								   value=""/>
		                </div>
						
				</div>

				  <div class="form-group">
					  <label class="col-sm-2 col-sm-2 control-label">活动时间</label>

					  <div class="col-md-10">
						  <!--<input type="date" name="activity_date" id="activity_date" class="form-control"
								 style="width:150px;float:left;">-->
						  <input type="text" class="form-control" style="width:120px;" onclick="WdatePicker
						  ({dateFmt:'yyyy-MM-dd HH:mm:ss'})" id="activity_date" name='activity_date'
								 placeholder="输入活动时间"
								 value=""/>
					  </div>

				  </div>

				<div class="form-group">
					<label class="col-sm-2 col-sm-2 control-label">活动地址</label>
					
					<div class="col-md-10">
	                    <select class="form-control" id="province" name="province" style="width:100px;float:left;" onchange="changeCity()">
		               		<option value="0">请选择</option>
		               		@foreach($provincelist as $ptm=>$pst)
		               			<option value="{{$pst['id']}}">{{$pst['name']}}</option>
		               		@endforeach
		                </select>

		                <select class="form-control" id="city" name="city" style="width:100px;float:left;margin-left:5px" disabled="disabled" onchange="changeCounty()">
		               		<option value="0">请选择</option>
		                </select>

		                <select class="form-control" id="county" name="county" style="width:100px;float:left;margin-left:5px" disabled="disabled" onchange="changeAddress()">
		               		<option value="0">请选择</option>
		                </select>

		                <br><br>
		                <input type="text" class="form-control" name="address" id="address" placeholder="请输入活动地址" disabled="disabled" style="width:400px;">
	                </div>
						
				</div>

				<div class="form-group">
					<label class="col-sm-2 col-sm-2 control-label">活动价格</label>
					<div class="col-sm-10">
	                    <input type="text" id="price" name="price" value="" placeholder="请输入活动价格" class="form-control" style="width:400px;">
					</div>
				</div>
				
				<button type="button" id="save" class="btn btn-success">提交</button>
				<button type="reset" class="btn btn-primary">重置</button>
			  </form>
			</div>
		  </div>
		  <!-- col-lg-12-->
		</div>	
	</section>
  <!-- /wrapper -->
</section>
<script type="text/javascript">
	function changeAddress(){
		var _county = $('#county').val();
		if(_county <= 0){
			alert('请选择县城信息');
			return false;
		}else{
			$('#address').removeAttr('disabled');
		}
	}

	function changeCounty(){
		var _city = $('#city').val();
		if(_city <=0){
			alert('请选择城市信息');
			return false;
		}else{
			$('#county').removeAttr('disabled');

			$.ajax({
				url:'/admin/common/getcountylist/'+_city,
				type:'get',
				dataType:'json',
				success:function(data){
					if(data.code == 200){
						var _html = '<option value="0">请选择</option>';
						var _countylist = data.countylist;

						// console.log(_countylist);

						for(var j=0; j< _countylist.length; j++){
							_html += '<option value="'+_countylist[j].id+'">'+_countylist[j].name+'</option>';
						}

						$('#county').html(_html);
					}
				}
			})
		}
	}

	function changeCity(){
		var _province = $('#province').val();
		if(_province <=0){
			alert('请选择省份信息');
			return false;
		}else{
			$('#city').removeAttr('disabled');

			$.ajax({
				url:'/admin/common/getcitylist/'+_province,
				type:'get',
				dataType:'json',
				success:function(data){
					if(data.code == 200){
						var _html = '<option value="0">请选择</option>';
						var _citylist = data.citylist;
						for(var i = 0; i < _citylist.length; i++){
							_html += '<option value="'+_citylist[i].id+'">'+_citylist[i].name+'</option>';
						}

						$('#city').html(_html);
					}
				}
			})
		}
	}
	$(function(){
		var thisId;
		$('.add_img').click(function(){
			thisId = $(this).attr('file_id');
			$('.material_file').click();
		})

		$('.material_file').change(function(){
			upload(thisId);
		})

		function upload(thisId){
			if($('.material_file').val() == ''){
	    		alert('请选择图片');
	    		return false;
	    	}
			

	    	var formData = new FormData($('#art_form')[0]);
	    	$.ajax({
	    		url:'/admin/common/upload',
	    		type:'post',
	    		data:formData,
	    		dataType:'json',
	    		contentType: false,
	            processData: false,
	            success:function(data){
	            	if(data.code == 200){
	            		var _imgsrc = 'https://boom-dog.oss-cn-zhangjiakou.aliyuncs.com/'+data.imgurl;
	            		if(thisId == 1){
	            			$('#thumb').attr('src',_imgsrc);
	            			$('#title_pic1').val(_imgsrc);
	            		}else if(thisId == 2){
							$('#thumb2').attr('src',_imgsrc);
							$('#title_pic2').val(_imgsrc);
						}else{
							$('#content').attr('src',_imgsrc);
	            			$('#c_imgsrc').val(_imgsrc);
	            		}
	            		
	            		alert('上传成功');
	            	}else{
	            		alert('上传失败');
	            	}
	            	return false;
	            }
	    	})
		}

		$('#save').click(function(){
			var _token = $('#_token').val(),
				_activityname = $('#name').val(),
				_quota = $('#quota').val(),
				_desc = $('#desc').val(),
				_thumb = $('#title_pic1').val(),
				_thumb2 = $('#title_pic2').val(),
				_content = $('#c_imgsrc').val(),
				_st = $('#start_date').val(),
				_et = $('#end_date').val(),
				_at = $('#activity_date').val();
				_province = $('#province').val(),
				_city = $('#city').val(),
				_county = $('#county').val(),
				_address = $('#address').val(),
				_price = $('#price').val();

			

			if(!_activityname){
				alert('请输入活动名称');
				return false;
			}

			if(!_quota){
				alert('请输入活动名额');
				return false;
			}

			if(!_desc){
				alert('请输入活动简介');
				return false;
			}

			if(!_thumb){
				alert('请上传活动封面图');
				return false;
			}

			if(!_thumb2){
				alert('请上传活动封面图2');
				return false;
			}

			if(!_content){
				alert('请上传活动详情');
				return false;
			}

			if(!_st || !_et){
				alert('请选择报名起止时间');
				return false;
			}else{
				var st = new Date(_st);
				var et = new Date(_et);

				if(Date.parse(st) > Date.parse(et)){
					alert('活动结束时间不能大于活动开始时间');
					return false;
				}
			}

			if(!_at){
				alert('请输入活动时间');
				return false;
			}

			if(!_province){
				alert('请选择省份信息');
				return false;
			}

			if(!_city){
				alert('请选择城市信息');
				return false;
			}

			if(!_county){
				alert('请选择县城信息');
				return false;
			}

			if(!_address){
				alert('请输入具体地址');
				return false;
			}

			if(!_price){
				alert('请输入价格');
				return false;
			}

			$.ajax({
				url:'/admin/activity/insert',
				type:'post',
				data:{'_token':_token,'name':_activityname,'quota':_quota,'desc':_desc,'thumb':_thumb,'thumb2':_thumb2,
					'content':_content,'start_date':_st,'end_date':_et,'activity_date':_at,'province':_province,
					'city':_city,
						'county':_county,'address':_address,'price':_price},
				dataType:'json',
				success:function(msg){
					if(msg.code == 200){
						alert('添加成功');
						location.href="/admin/activity/list";
					}else if(msg.code == 300){
						alert('活动已存在,请勿重复添加');
						location.reload();
					}else{
						alert('添加失败');
						location.reload();
					}
				}
			})
		});
	})
	
</script>
@endsection